<template>
    <section class="ai-projects">
      <div class="container">
        <h2 class="section-title">AI 项目实践</h2>
        <div class="filter-controls">
          <div class="filter-group">
            <label for="type-filter">项目类型：</label>
            <select id="type-filter" v-model="selectedType">
              <option value="all">全部</option>
              <option v-for="type in projectTypes" :key="type" :value="type">
                {{ type }}
              </option>
            </select>
          </div>
          <div class="filter-group">
            <label for="sort-by">排序方式：</label>
            <select id="sort-by" v-model="sortBy">
              <option value="date-desc">最新发布</option>
              <option value="date-asc">最早发布</option>
              <option value="name-asc">名称 (A-Z)</option>
              <option value="name-desc">名称 (Z-A)</option>
            </select>
          </div>
        </div>
        
        <div class="project-grid">
          <div 
            v-for="project in filteredProjects" 
            :key="project.id" 
            class="project-card"
            @click="navigateToProject(project.id)"
          >
            <div class="project-type" :class="getTypeClass(project.type)">
              {{ project.type }}
            </div>
            <div class="project-icon">
              <i :class="getProjectIcon(project.type)"></i>
            </div>
            <h3 class="project-title">{{ project.name }}</h3>
            <p class="project-desc">{{ project.description }}</p>
            <div class="project-meta">
              <span class="project-author">
                <i class="fas fa-user"></i> {{ project.author }}
              </span>
              <span class="project-date">
                <i class="fas fa-calendar-alt"></i> {{ formatDate(project.createdAt) }}
              </span>
            </div>
            <div class="project-actions">
              <button class="demo-btn" @click.stop="viewDemo(project.demoUrl)">
                查看演示
              </button>
              <button class="detail-btn" @click.stop="navigateToProject(project.id)">
                项目详情
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </template>
  
  <script>
  import { aiProjectApi } from '@/api/api'
  

  export default {
    name: 'AIProjectList',
    data() {
      return {
        selectedType: 'all',
        sortBy: 'date-desc',
        // 静态占位数据
        placeholderProjects: [
          {
            id: 1,
            name: '智能聊天机器人',
            description: '基于langchain＋本地ollama的大模型微信智能对话系统，支持多轮对话和上下文理解',
            type: '自然语言处理',
            author: 'appleyiyi <真实>',
            createdAt: '2023-05-15',
            demoUrl: 'https://gitee.com/appleyiyi/wx-chat-bot',
            coverImage: ''
          },
          {
            id: 2,
            name: '图像风格迁移',
            description: '使用深度学习将照片转换为名画风格',
            type: '计算机视觉',
            author: '李四',
            createdAt: '2023-06-20',
            demoUrl: 'https://demo.example.com/style-transfer',
            coverImage: ''
          },
          {
            id: 3,
            name: '股票预测系统',
            description: '基于LSTM的时间序列预测模型',
            type: '数据分析',
            author: '王五',
            createdAt: '2023-04-10',
            demoUrl: 'https://demo.example.com/stock-prediction',
            coverImage: ''
          }
        ],
        apiProjects: [], // 从API获取的项目
        loading: false,
        error: null,
        // 项目类型 - 可以从后端动态获取
        projectTypes: [
          '自然语言处理',
          '计算机视觉',
          '数据分析',
          '语音处理',
          '强化学习'
        ]
      }
    },
    computed: {
      projects() {
        // 合并占位项目和API项目
        return [...this.placeholderProjects, ...this.apiProjects];
      },
      filteredProjects() {
        let projects = [...this.projects];
        
        // 按类型过滤
        if (this.selectedType !== 'all') {
          projects = projects.filter(p => p.type === this.selectedType);
        }
        
        // 排序
        switch (this.sortBy) {
          case 'date-desc':
            projects.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
            break;
          case 'date-asc':
            projects.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
            break;
          case 'name-asc':
            projects.sort((a, b) => a.name.localeCompare(b.name));
            break;
          case 'name-desc':
            projects.sort((a, b) => b.name.localeCompare(a.name));
            break;
        }
        
        return projects;
      }
    },
    methods: {
      getTypeClass(type) {
        return `type-${type.replace(/\s+/g, '-').toLowerCase()}`;
      },
      getProjectIcon(type) {
        const icons = {
          '自然语言处理': 'fas fa-comment-dots',
          '计算机视觉': 'fas fa-eye',
          '数据分析': 'fas fa-chart-line',
          '语音处理': 'fas fa-microphone',
          '强化学习': 'fas fa-brain'
        };
        return icons[type] || 'fas fa-project-diagram';
      },
      formatDate(dateStr) {
        const date = new Date(dateStr);
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      },
      navigateToProject(id) {
        this.$router.push({ name: 'AIProjectDetail', params: { id } });
      },
      viewDemo(url) {
        window.open(url, '_blank');
      },
      async fetchProjects() {
        this.loading = true;
        this.error = null;
        try {
          const response = await aiProjectApi.getAIProjectList();
          console.log('获取到的AI项目列表:', response);
          this.apiProjects = response || [];
        } catch (err) {
          console.error('获取项目列表失败:', err);
          this.error = '获取项目列表失败，请稍后重试';
        } finally {
          this.loading = false;
        }
      }
    },
    created() {
      this.fetchProjects();
    }
  }
  </script>
  
  <style scoped>
  .ai-projects {
    padding: 4rem 0;
    background-color: #f8f9fa;
  }
  
  .section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: #2c3e50;
  }
  
  .filter-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .filter-group {
    display: flex;
    align-items: center;
  }
  
  .filter-group label {
    margin-right: 0.5rem;
    font-weight: 500;
  }
  
  .filter-group select {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: white;
  }
  
  .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
  }
  
  .project-card {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    text-decoration: none;
    color: #2c3e50;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }
  
  .project-type {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem 0.75rem;
    border-bottom-left-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
  }
  
  .type-自然语言处理 {
    background-color: #3498db;
  }
  .type-计算机视觉 {
    background-color: #e74c3c;
  }
  .type-数据分析 {
    background-color: #2ecc71;
  }
  .type-语音处理 {
    background-color: #9b59b6;
  }
  .type-强化学习 {
    background-color: #f39c12;
  }
  
  .project-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #3498db;
  }
  
  .project-title {
    margin: 0.5rem 0;
    font-size: 1.25rem;
    color: #2c3e50;
  }
  
  .project-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 添加其他浏览器支持 */
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    
    display: box;
    line-clamp: 2;
    box-orient: vertical;
    }
  
  .project-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #888;
  }
  
  .project-meta i {
    margin-right: 0.3rem;
  }
  
  .project-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
  }
  
  .project-actions button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .demo-btn {
    background-color: #f8f9fa;
    color: #3498db;
    border: 1px solid #3498db !important;
  }
  
  .demo-btn:hover {
    background-color: #3498db;
    color: white;
  }
  
  .detail-btn {
    background-color: #3498db;
    color: white;
  }
  
  .detail-btn:hover {
    background-color: #2980b9;
  }
  
  @media (max-width: 768px) {
    .filter-controls {
      flex-direction: column;
      gap: 1rem;
    }
    
    .project-grid {
      grid-template-columns: 1fr;
    }
  }
  </style>